<template>
  <div>
    <van-nav-bar title="投诉建议"
                 left-text=""
                 left-arrow
                 @click-left="onClickLeft" />
    <van-notice-bar left-icon="volume-o"
                    text="个人信息都会被保密。您的投诉和建议都会得到妥当的处理。一起维护和谐美好的小区吧~" />
    <div class="complain-title">问题类型</div>
    <div v-for="(item,index) of askType"
         :key="index"
         class="item-complain">
      <div class="wrap-box3 "
           :style=item.styleSelf
           @click="handleHost(item)">
        <van-icon name="warning-o"
                  size="large"
                  class="icon-complain" />
        <div class="text-complain">
          {{item.text}}
        </div>
      </div>
    </div>
    <!-- 手机 -->
    <van-field v-model="userTel"
               type="tel"
               label="联系电话"
               placeholder="我们承诺保密您的个人信息"
               clearable
               :required="true" />
    <van-field v-model="askFor"
               label="具体信息"
               type="textarea"
               placeholder="请填写您要投诉或建议的对象或门户"
               :required="true"
               autosize />
    <van-submit-bar button-text="提交"
                    bind:submit="onSubmit"
                    button-color="#72cacd"
                    v-b-modal.modal-prevent-closing />
    <!-- 弹框提示 -->
    <div>
      <b-modal id="modal-prevent-closing"
               ref="modal"
               title="提示"
               @ok="handleOk">
        <form ref="form"
              @submit.stop.prevent="handleSubmit">
          <b-form-group>
            <p v-if="getShowErr">缺失必要信息！</p>
            <p v-else>提交成功！</p>
          </b-form-group>
        </form>
      </b-modal>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComplainAppre',
  data () {
    return {
      userTel: '',
      askFor: '',
      askType: [{
        text: '功能异常',
        styleSelf: 'background-color:rgba(238, 238, 238, 0.808);',
        status: false
      }, {
        text: '物业管理',
        styleSelf: 'background-color:rgba(238, 238, 238, 0.808);',
        status: false
      }, {
        text: '投诉住户',
        styleSelf: 'background-color:rgba(238, 238, 238, 0.808);',
        status: false
      }, {
        text: '其他问题',
        styleSelf: 'background-color:rgba(238, 238, 238, 0.808);',
        status: false
      }]
    }
  },
  computed: {
    getShowErr () {
      if (this.userTel !== '' && this.askFor !== '') {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onSubmit () {
      this.showSucs = true
    },
    handleOk (bvModalEvt) {
      //  把投诉信息保存到vuex中
      var ty = ''
      for (let i = 0; i < this.askType.length; i++) {
        if (this.askType[i].status === true) {
          ty = ty + ' ' + this.askType[i].text
        }
      }
      var obj = {
        tel: this.userTel,
        msg: this.askFor,
        type: ty
      }
      this.$store.dispatch('_addComplain', obj)
      // Prevent modal from closing
      bvModalEvt.preventDefault()
      // operate
      // close
      this.$nextTick(() => {
        this.$bvModal.hide('modal-prevent-closing')
      })
    },
    handleHost (item) {
      if (item.styleSelf === 'background-color:rgba(178, 245, 247, 0.808)') {
        item.styleSelf = 'background-color:rgba(238, 238, 238, 0.808)'
        item.status = false
      } else {
        item.styleSelf = 'background-color:rgba(178, 245, 247, 0.808)'
        item.status = true
      }
    }
  }
}
</script>

<style scoped>
.el-radio__input.is-checked + .el-radio__label {
  color: #ffb6c1 !important;
}
/* 选中后小圆点的颜色 */
.el-radio__input.is-checked .el-radio__inner {
  background: #ffb6c1 !important;
  border-color: #ffb6c1 !important;
}
.wrap {
  text-align: center;
}
.van-popup.van-popup--center {
  width: 70%;
  height: auto;
}
.createPermit {
  color: #fff;
  border: none;
  width: 90%;
  margin-top: 4%;
  padding-bottom: 2%;
  padding-top: 2%;
  background-color: rgb(114, 202, 205);
}
.van-cell__title {
  text-align: left;
}
.qrCode {
  width: 80%;
  height: auto;
}
.tip {
  text-align: center;
  width: 90%;
  font-size: 13px;
  color: #778899;
}
.wrap-box3 {
  position: relative;
  width: 115px;
  height: 30px;
  border-radius: 15px;
  background-color: rgba(238, 238, 238, 0.808);
  font-size: 14px;
  z-index: 999;
}
.complain-title {
  margin-top: 10px;
  margin-left: 15px;
  margin-bottom: 8px;
}
.item-complain {
  display: inline-block;
  margin-left: 15px;
}
.icon-complain {
  position: absolute;
  top: 7px;
  left: 15px;
}
.text-complain {
  position: absolute;
  top: 4px;
  left: 40px;
}

.van-nav-bar {
  background-color: rgb(114, 202, 205);
}
::v-deep .van-nav-bar .van-icon {
  color: #fff;
}
::v-deep .van-nav-bar__text {
  color: #fff;
  /* color: #07c160; */
}
::v-deep .van-nav-bar .van-ellipsis {
  color: #fff;
}
.van-cell {
  color: #323233 !important;
}
::v-deep .van-field__label {
  color: #323233 !important;
}
::v-deep .van-cell__title {
  color: #323233 !important;
}
</style>
